<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/hero.css" />
  </head>

  <body>
    <a href="javascript:" id="create">创建英雄列表</a>
    <ul class="list"></ul>
    <!-- <script src="js/hero.js"></script> -->
    <script type="text/javascript">
      // 后的的数据
      // datas = [{},{},{}]
      let datas = [
        { name: '司马懿', imgSrc: '01.jpg' },
        { name: '女娲', imgSrc: '02.jpg' },
        { name: '百里守约', imgSrc: '03.jpg' },
        { name: '亚瑟', imgSrc: '04.jpg' },
        { name: '虞姬', imgSrc: '05.jpg' },
        { name: '张良', imgSrc: '06.jpg' },
        { name: '安其拉', imgSrc: '07.jpg' },
        { name: '李白', imgSrc: '08.jpg' },
        { name: '阿珂', imgSrc: '09.jpg' },
        { name: '墨子', imgSrc: '10.jpg' },
        { name: '鲁班', imgSrc: '11.jpg' },
        { name: '嬴政', imgSrc: '12.jpg' },
        { name: '孙膑', imgSrc: '13.jpg' },
        { name: '周瑜', imgSrc: '14.jpg' },
        { name: 'XXX', imgSrc: '15.jpg' },
        { name: 'XXX', imgSrc: '16.jpg' },
        { name: 'XXX', imgSrc: '17.jpg' },
        { name: 'XXX', imgSrc: '18.jpg' },
        { name: 'XXX', imgSrc: '19.jpg' },
        { name: 'XXX', imgSrc: '20.jpg' },
      ]
      const list= document.querySelector('.list');
      const create= document.querySelector('#create');
     
      create.addEventListener('click',function(){
       render()

      })
      function render(){
        list.innerHTML=''
        datas.forEach((item,index)=>{
          const li= document.createElement('li');
          const img= document.createElement('img');
          img.src=`../创建节点/uploads/heros/${item.imgSrc}` 
          img.title=`${item.name}`
          li.appendChild(img)
    
          list.appendChild(li)
      
        })
        
        
     
       
       
      }
    </script>
  </body>
</html>
